import React, { Component, } from 'react'
import {
    Text, View, Image, ScrollView, Platform,
    TouchableOpacity, StyleSheet,
    TextInput
} from 'react-native'
import { connect } from 'react-redux';
import { SafeAreaView } from 'react-navigation'
import { NavigationHeader } from '../../components'
import { Px } from '../../utils'
import { ActionTypes } from '../../constants';
import { Toast } from 'antd-mobile-rn'


class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: ''
        }
    }

    render() {
        return (
            <SafeAreaView style={styles.container}>
                <NavigationHeader
                    title="登录"
                    navigation={this.props.navigation}
                />
                <View style={styles.containView}>
                    <View style={styles.phoneView}>
                        <TextInput
                            style={styles.phone}
                            placeholder="请输入用户名"
                            onChangeText={(text) => {
                                this.setState({
                                    username: text        
                                })
                            }}
                        />
                    </View>
                    <View style={styles.verifyView}>
                        <TextInput
                            style={styles.verifyText}
                            placeholder="登录密码"
                            onChangeText={(text) => {
                                this.setState({
                                    password: text
                                })
                            }}
                        />
                    </View>
                    <TouchableOpacity
                        onPress={() => {
                            this._onLogin()
                        }}
                        style={styles.registerBtn}>
                        <Text style={styles.registerText}>登录</Text>
                    </TouchableOpacity>
                    <View style={styles.otherLoginView}>
                        {/* <TouchableOpacity>
                            <Text style={styles.otherLoginText}>手机号快捷登录</Text>
                        </TouchableOpacity> */}
                        <TouchableOpacity
                            onPress={() => {
                                this.props.navigation.navigate('Register')
                            }}
                        >
                            <Text style={styles.otherLoginText}>注册</Text>
                        </TouchableOpacity>
                    </View>
                </View>

            </SafeAreaView>
        )
    }

    _onLogin() {
        if (this.state.username.length !== 0 && this.state.password.length !== 0) {
            const data = {
                username: this.state.username,
                password: this.state.password
            }
            const callBack = this._loginSuccess.bind(this)
            actionUtil(ActionTypes.API_LOGIN,{data, callBack })
        }
    }

    _loginSuccess(response, error) {
        if (response) {
            this.props.navigation.goBack()
        } else {
            Toast.fail('登录失败')
        }
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    containView: {
        flex: 1,
        backgroundColor: '#fff',
        paddingHorizontal: Px(24)
    },
    phoneView: {
        marginTop: Px(30),
        height: Px(60)
    },
    phone: {
        backgroundColor: '#e9e9e9',
        height: '100%',
        borderRadius: Px(4)
    },
    verifyView: {
        marginTop: Px(30),
        height: Px(60),
        flexDirection: 'row'
    },
    verifyText: {
        backgroundColor: '#e9e9e9',
        height: '100%',
        flex: 3,
        borderRadius: Px(4)
    },
    verifyButton: {
        flex: 2,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#FC3F30',
        marginLeft: Px(20),
        borderRadius: Px(4)
    },
    verifyButtonText: {
        fontSize: Px(26),
        color: '#fff'
    },
    registerBtn: {
        backgroundColor: '#FC3F30',
        marginTop: Px(30),
        height: Px(60),
        alignItems: 'center',
        justifyContent: 'center'
    },
    registerText: {
        fontSize: Px(26),
        color: '#fff'
    },
    otherLoginView: {
        height: Px(55),
        marginTop: Px(30)
    },
    otherLoginText: {
        fontSize: Px(24),
        color: '#666'
    }
});

export default connect(state => ({

})
)(Login)
